NaN

天天生鲜项目实战

(一) 个人中心

  1. 前期准备工作(图标, 截图, markman)
  2. 修改视口
  3. 样式重置
  4. 编写顶部代码
  5. 编写列表代码
  6. 编写底部代码

1. 前期准备工作(图标, 截图, markman)

2. 修改视口 

<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no">

3. 样式重置(使用外部样式) 

* {
    margin: 0;
    padding: 0;
}
ul,li {
    list-style: none;
}

4. 编写顶部代码 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no">
    <link rel="stylesheet" href="./style.css">
    <title>Document</title>
</head> 
<body>
    <!-- 顶部 --> 
    <div class="top">
        <img src="http://fresh.huruqing.cn/img/bg2.78d35cdc.png" alt="">
        <span class="text">立即登录</span>
    </div> 
</body> 
</html>

// style.css

* {
    margin: 0;
    padding: 0;
}
ul,li {
    list-style: none;
}

/* 顶部设置 */
.top {
    border: 1px solid;
    position: relative;
}
.top .text{
    position: absolute;
    top: 25px;
    left: 25px;
    color: #fff;
}

5. 编写列表代码 

 <!-- 列表 -->
<ul class="list">
    <li class="item">
        <span>我的订单</span>
        <img src="./img/jiantou2.png" alt="">
    </li> 
    <li class="item">
        <span>收藏</span>
        <img src="./img/jiantou2.png" alt="">
    </li> 
    <li class="item">
        <span>足迹</span>
        <img src="./img/jiantou2.png" alt="">
    </li> 
    <li class="item">
        <span>设置</span>
        <img src="./img/jiantou2.png" alt="">
    </li> 
</ul>
    
<style>
/* 列表 */
ul.list {
    background-color: #fff;
    margin-top: 10px; 
    padding-left: 15px;
    padding-right: 15px;
}

.list li.item{
    height: 44px;
    border-bottom: 1px solid #f7f8f9; 
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.list .item img {
    height: 14px; 
} 
</style>

6. 编写底部代码 

 <!-- 底部 -->
<ul class="footer">
    <li class="item">
        <img src="./img/home.png" alt="">
        <span>首页</span>
    </li>
    <li class="item">
        <img src="./img/type.png" alt="">
        <span>分类</span>
    </li>
    <li class="item">
        <img src="./img/cart.png" alt="">
        <span>购物车</span>
    </li>
    <li class="item">
        <img src="./img/wode.png" alt="">
        <span>我的</span>
    </li>
</ul>

<style>
.list .item img {
    height: 14px; 
} 

/* 底部 */

.footer {
    height: 50px;
    background-color: #fff;
    position: fixed;
    width: 100%;
    bottom: 0;
    display: flex;
    justify-content: space-around; 
    align-items: center;
}
.footer .item {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 14px;
}

.footer img {
    height: 20px;
    width: 20px;
} 
</style>

完整代码

个人中心.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no">
    <link rel="stylesheet" href="./style.css">
    <title>Document</title>
</head> 
<body>
    <!-- 顶部 --> 
    <div class="top">
        <img src="http://fresh.huruqing.cn/img/bg2.78d35cdc.png" alt="">
        <span class="text">立即登录</span>
    </div> 

    <!-- 列表 -->
    <ul class="list">
        <li class="item">
            <span>我的订单</span>
            <img src="./img/jiantou2.png" alt="">
        </li> 
        <li class="item">
            <span>收藏</span>
            <img src="./img/jiantou2.png" alt="">
        </li> 
        <li class="item">
            <span>足迹</span>
            <img src="./img/jiantou2.png" alt="">
        </li> 
        <li class="item">
            <span>设置</span>
            <img src="./img/jiantou2.png" alt="">
        </li> 
    </ul>

    <!-- 底部 -->
    <ul class="footer">
        <li class="item">
            <img src="./img/home.png" alt="">
            <span>首页</span>
        </li>
        <li class="item">
            <img src="./img/type.png" alt="">
            <span>分类</span>
        </li>
        <li class="item">
            <img src="./img/cart.png" alt="">
            <span>购物车</span>
        </li>
        <li class="item">
            <img src="./img/wode.png" alt="">
            <span>我的</span>
        </li>
    </ul>

</body> 
</html>

style.css代码

* {
    margin: 0;
    padding: 0;
}
ul,li {
    list-style: none;
}
body {
    background-color: #f4f4f4;
}

/* 顶部设置 */
.top { 
    position: relative;
}
.top img {
    width: 100%;
}
.top .text{
    position: absolute;
    top: 25px;
    left: 25px;
    color: #fff;
}


/* 列表 */
ul.list {
    background-color: #fff;
    margin-top: 10px; 
    padding-left: 15px;
    padding-right: 15px;
}

.list li.item{
    height: 44px;
    border-bottom: 1px solid #f7f8f9; 
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.list .item img {
    height: 14px; 
} 

/* 底部 */

.footer {
    height: 50px;
    background-color: #fff;
    position: fixed;
    width: 100%;
    bottom: 0;
    display: flex;
    justify-content: space-around; 
    align-items: center;
}
.footer .item {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 14px;
}

.footer img {
    height: 20px;
    width: 20px;
}

(2) 购物车

  1. 修改视口
  2. 样式重置
  3. 编写顶部代码
  4. 编写商品列表
  5. 编写合计部分代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no">
    <title>Document</title>
    <link rel="stylesheet" href="./css/cart.css">

</head>
<body>
    <!-- 1.顶部 -->
    <div class="header">
         <p class="left">
             <img class="img" src="./img/jiantou3.png" alt="">
             <span>返回</span>
         </p>    
         <p class="title">
             购物车
         </p>
         <p class="right">
             编辑
         </p> 
    </div> 

    <!-- 商品列表 -->
    <ul class="list">
        <li class="item">
            <input class="inp" type="checkbox">
            <img src="https://mall.s.maizuo.com/6c4c9ecfd804ae4cc7f397cb16f332d6.png" alt="">
            <div class="t-box">
                <p class="t1">【山东】金秋红蜜桃</p>
                <p class="t2">
                    <span class="t2-1">¥ 30.33</span>
                    <span class="t2-2">x4</span>
                </p>
            </div>
        </li> 
        <li class="item">
            <input class="inp" type="checkbox">
            <img src="https://mall.s.maizuo.com/6c4c9ecfd804ae4cc7f397cb16f332d6.png" alt="">
            <div class="t-box">
                <p class="t1">【山东】金秋红蜜桃</p>
                <p class="t2">
                    <span class="t2-1">¥ 30.33</span>
                    <span class="t2-2">x4</span>
                </p>
            </div>
        </li>   
    </ul>

    <!-- 合计 -->
    <div class="count">
        <div class="l">
            <input type="checkbox">
            <span>全选</span>
        </div>
        <div class="r">
            <span class="r1">合计:</span>
            <span class="r2">¥100.00</span>
            <span class="r3">结算</span>
        </div>
    </div>

</body>
</html>

 /* 重置样式 */
 * {
     margin: 0;
     padding: 0;
     box-sizing: border-box; 
 }

 ul,
 li {
     list-style: none;
 }

 body {
     background-color: #f4f4f4;
 }

 //  顶部
 .header {
     height: 50px;
     background-color: #fff;
     display: flex;
     justify-content: space-between;
     align-items: center;
     padding-left: 20px;
     padding-right: 20px;
     border-bottom: 1px solid #f4f4f4;
     .left,.right {
         color: #c03131; 
         width: 50px;
     }
     .title { 
         flex-grow: 1;
         text-align: center;
     }
     .right {
         text-align: right;
     }

     .left { 
         display: flex;
         align-items: center; 
         .img {
             height: 18px;
             width: 18px;
         }
     }

 }

//  商品列表
 .list {
     
    .item{
        height: 145px;
        background-color: #fff;
        border-bottom: 1px solid #f2f2f2;
        img {
            width: 110px;
            height: 110px;
            background-color: #f8f8f8;
            margin-left: 16px;
        }
        display: flex;
        align-items: center;
        .inp {
            margin-left: 18px;
        }
        .t-box {
            margin-left: 20px;
            flex-grow: 1; 
            height: 110px;
            padding-top: 5px;
            padding-bottom: 9px;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
        }
        .t1 {
            font-weight: 500;
        }
        .t2 {
            display: flex;
            justify-content: space-between;
            padding-right: 15px;
        }
        .t2-1 {
            color: #c03131;
        }
        .t2-2 {
            color: #999;
        }
    }
 }

//  合计部分
 .count {
     height: 50px;
     background-color: #fff;
     position: fixed;
     width: 100%;
     bottom: 50px;
     display: flex;
     justify-content: space-between;
     align-items: center;
     .l {
         input {margin-left: 36px;}
         span {
             margin-left: 8px;
         }
     }
     .r { 
         display: flex;
         align-items: center;
         padding-right: 18px;
         .r2{
            margin-left: 10px;
         }
         .r3 { 
            margin-left: 15px;
            background-color: #c03131; 
            color: #fff;
            width: 126px;
            height: 45px;
            text-align: center;
            line-height: 45px;
            border-radius: 35px;
         }
     }
 }

(3) 首页

例1. 换行 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            border: 1px solid red;
            display: flex;
            flex-wrap: wrap;
        }
        span {
            width: 40%;
            height: 100px;
            border: 1px solid blue;
            box-sizing: border-box;
            margin-bottom: 15px;
            flex-grow: 1;
        }
        span:nth-child(even) {
            margin-left: 15px;
        }
    </style>
</head>
<body>
    <div>
        <span>1</span>
        <span>1</span>
        <span>1</span>
        <span>1</span>
        <span>1</span>
        <span>1</span>
        <span>1</span>
        <span>1</span>
        <span>1</span>
        <span>1</span>
        <span>1</span>
        <span>1</span>
        <span>1</span>
        <span>1</span>
        <span>1</span>
        <span>1</span>
        <span>1</span>
        <span>1</span>
        <span>1</span>
        <span>1</span>
        <span>1</span>
        <span>1</span>
        <span>1</span>
        <span>1</span>
    </div>
</body>
</html>

例2. 单行布局 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            border: 1px solid red;
            padding: 10px;
            display: flex; 
        }
        .item {
            height: 100px;
            border: 1px solid blue;
            width: 50%;
        }
        .box2 {
            margin-left: 10px;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="item box1">1</div>
        <div class="item box2">2</div>
    </div>
</body>
</html>

例3. 多行布局 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            border: 1px solid red;
            display: flex;
            flex-wrap: wrap;
        }
        span {
            width: 40%;
            height: 100px;
            border: 1px solid blue;
            box-sizing: border-box;
            margin-bottom: 15px;
            flex-grow: 1;
        }
        span:nth-child(even) {
            margin-left: 15px;
        }
    </style>
</head>
<body>
    <div>
        <span>1</span>
        <span>1</span>
        <span>1</span>
        <span>1</span>
        <span>1</span>
        <span>1</span>
        <span>1</span>
        <span>1</span>
        <span>1</span>
        <span>1</span>
        <span>1</span>
        <span>1</span>
        <span>1</span>
        <span>1</span>
        <span>1</span>
        <span>1</span>
        <span>1</span>
        <span>1</span>
        <span>1</span>
        <span>1</span>
        <span>1</span>
        <span>1</span>
        <span>1</span>
        <span>1</span>
    </div>
</body>
</html>

例4. 轮播图 

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        .wrap { 
            position: relative;
        }

        .img-box {
            position: fixed;
            box-sizing: content-box; 
            top: 0;
            left: 0;
            transition: all 1s;
            animation: gundong 6s infinite;
            width: 400vw;
            font-size: 0;
        }

        img {
            width: 100vw;
        }

        @keyframes gundong {
            0% {
                left: 0;
            }

            25% {
                left: -100vw;
            }

            75% {
                left: -200vw;
            }

            100% {
                left: -300vw;
            }
        }

        @keyframes active1 {
            0% {
                background-color: blue;
                color: #fff; 
            }

            25% {
                background-color: #f4f4f4;
                color: #999;
            }

            75% {
                background-color: #f4f4f4;
                color: #999;
            }

            100% {
                background-color: blue;
                color: #fff; 
            }
        }
        @keyframes active2 {
            0% {
                background-color: #f4f4f4;
                color: #999;
            }

            25% {
                background-color: blue;
                color: #fff; 
            }

            75% {
                background-color: #f4f4f4;
                color: #999;
            }

            100% {
                background-color: #f4f4f4;
                color: #999;
            }
        }
        @keyframes active3 {
            0% {
                background-color: #f4f4f4;
                color: #999;
            }

            25% {
                background-color: #f4f4f4;
                color: #999;
            }

            75% {
                background-color: blue;
                color: #999; 
            }

            100% {
                background-color: #f4f4f4;
                color: #999;
            }
        }

        .page {
            position: absolute;
            bottom: 0;
            width: 100%;
            display: flex;
            justify-content: center;

        }

        .page .num {
            width: 25px;
            height: 25px;
            display: inline-flex;
            justify-content: center;
            align-items: center;
            border-radius: 50%;
            background-color: #f4f4f4;
            color: #999;
            margin: 5px;
        }

        .page .num:nth-child(1) {
            animation: active1 6s infinite;
        }
        .page .num:nth-child(2) {
            animation: active2 6s infinite;
        }
        .page .num:nth-child(3) {
            animation: active3 6s infinite;
        }
    </style>
</head>

<body>
    <div class="wrap">
        <div class="img-box">
            <img src="http://static.huruqing.cn/fresh/banner1.jpeg" alt="">
            <img src="http://static.huruqing.cn/fresh/banner2.jpeg" alt="">
            <img src="http://static.huruqing.cn/fresh/banner3.jpeg" alt="">
            <img src="http://static.huruqing.cn/fresh/banner1.jpeg" alt="">
        </div>
        <div class="page">
            <span class="num">1</span>
            <span class="num">2</span>
            <span class="num">3</span>
        </div>
        <img style="display: block;width: 100%;visibility: hidden;" src="http://static.huruqing.cn/fresh/banner1.jpeg"
            alt="">
    </div>
    <div>
        分类列表
    </div>
</body>
</html>